<template>
	<view class="container">

		<view class="card" style="margin-top: 20rpx;" v-if="userInfo.circle_type != 1">
			<view class="card-title">企业logo</view>
			<view class="layout-img-list">
				<view class="layout-img-list-item" v-if="form.logo" @click="upload('logo')">
					<image :src="form.logo" mode="" class="layout-img-list-item-image" mode="aspectFill">
					</image>
					<image :src="ossUrl + `/static/15.png`" mode="" class="layout-img-list-item-del"
						@click.stop="form.logo = ''"></image>
				</view>
				<view class="layout-img-list-add" @click="upload('logo')" v-else>
					<image :src="ossUrl +  '/static/image/组149.png'" mode=""></image>
				</view>
			</view>
		</view>
		<view class="card" style="margin-top: 20rpx;" v-if="userInfo.circle_type != 1">
			<view class="card-title">名片logo</view>
			<view class="layout-img-list">
				<view class="layout-img-list-item" v-if="form.card_logo" @click="upload('card_logo')">
					<image :src="form.card_logo" mode="" class="layout-img-list-item-image" mode="aspectFill">
					</image>
					<image :src="ossUrl + `/static/15.png`" mode="" class="layout-img-list-item-del"
						@click.stop="form.card_logo = ''"></image>
				</view>
				<view class="layout-img-list-add" @click="upload('card_logo')" v-else>
					<image :src="ossUrl +  '/static/image/组149.png'" mode=""></image>
				</view>
			</view>
		</view>
		<view class="card" style="margin-top: 20rpx;" v-if="userInfo.circle_type != 1">
			<view class="card-title">企业视频</view>
			<view class="layout-img-list">
				<view class="layout-img-list-item" v-if="form.video" @click="uploadHttp()">
					<image :src="form.video + '?x-oss-process=video/snapshot,t_0,f_jpg'" mode=""
						class="layout-img-list-item-image" mode="aspectFill">
					</image>
					<image :src="ossUrl + `/static/15.png`" mode="" class="layout-img-list-item-del"
						@click.stop="form.video = ''"></image>
				</view>
				<view class="layout-img-list-add" @click="uploadHttp()" v-else>
					<image :src="ossUrl +  '/static/image/组149.png'" mode=""></image>
				</view>
			</view>
		</view>
		<view class="card" style="margin-top: 20rpx;" v-if="userInfo.circle_type != 1">
			<!-- <view class="card-title">企业/组织简介</view> -->
			<view class="card-title flex-row-between">
				企业/组织简介
				<view class="card-title-r">
					<view class="card-title-r-item" @click="toSharePoster">
						<span style="margin-left: 10rpx;">
							共享海报
						</span>
					</view>
				</view>
			</view>

			<!-- <u--textarea placeholder="企业简介" v-model="form.text_introduction" border="none"></u--textarea> -->
			<textarea placeholder="企业简介" style="white-space: pre-wrap;" placeholder-class="ac" :maxlength="-1"
				v-model="form.text_introduction" :cursor-spacing="110" />
		</view>


		<view class="card" style="margin-top: 20rpx;">
			<view class="card-title">身份设置</view>
			<view class="card-switch flex-row-between" v-for="(it, index) in form.identity">
				<view style="flex: 1;padding-right: 20rpx;display: flex;">
					<u--input v-model="it.name" border="none" placeholder="请输入"
						:customStyle="{background: '#eee', padding: '10rpx', boxSizing: 'border-box'}"></u--input>
					<view style="width: 140rpx;margin-left: 10rpx;" class="flex-row-center sort">
						<input type="number" placeholder="排序值" placeholder-class="ac" v-model="it.sort"
							style="height: 78rpx;font-size: 30rpx;" />
					</view>
				</view>
				<view class="flex-row">
					<u-switch v-model="it.status" :activeValue="1" :inactiveValue="0"
						@change="e => identityChange(e, it)" activeColor="#64aa6b" size="20"
						:disabled="info.thecharts === 1"></u-switch>
					<view class="description">{{it.status === 0 ? '自由选择' : '需要申请'}}</view>
					<!-- <u-icon name="close" color="#e4393c" size="18" @click="delItem(index)" v-if="info.thecharts != 1"></u-icon> -->
				</view>
			</view>
			<view class="add" v-if="is_add">
				<view class="add-input">
					<input type="text" placeholder="请输入" v-model="identityValue" placeholder-class="add-input-plac">
				</view>
				<view class="add-r">
					<u-icon name="checkmark" color="#00e121" size="18" style="margin-right: 10rpx;"
						@click="save"></u-icon>
					<u-icon name="close" color="#e4393c" size="18" @click="del"></u-icon>
				</view>
			</view>
			<view class="add-btn flex-row-center" @click="open" v-if="info.thecharts != 1">+</view>
		</view>

		<view class="card" style="margin-top: 20rpx;">
			<view class="card-title">等级设置</view>

			<view class="flex-row" style="margin-top: 20rpx;">
				<view class="card">
					<view class="add setting" v-for="it in form.grade" :key="it.sort">
						<view class="add-input">
							<input type="text" placeholder="请输入" v-model="it.name" placeholder-class="add-input-plac">
						</view>
						<view class="add-r tx">
							lv{{it.sort}} <span>{{it.interval}}</span>
						</view>
					</view>
					<!-- <view class="add-btn flex-row-center">+</view> -->
				</view>
				<view class="description2">框内设置访问量区间值，根据名片访问量的高低，划分名片等级称呼。</view>
			</view>
		</view>
		<view class="card" style="margin-top: 20rpx;" v-if="userInfo.circle_type != 1">
			<view class="card-title flex-row-between">
				项目PPT
				<view class="card-title-r">
					<view class="card-title-r-item" @click="uploadPdf" v-if="fileList.length > 0">
						<span><uni-icons custom-prefix="iconfont" type="icon-jiahao-fill" size="16"
								color="#23B97F"></uni-icons></span>
						<span style="margin-left: 10rpx;">
							添加
						</span>
					</view>
				</view>
			</view>
			<div class="form-list-c" @click="uploadPdf" v-if="fileList.length === 0">
				<view class="form-list-c-add">
					+ 添加PDF文件
				</view>
				<view class="form-list-c-tx">
					<view>可添加对外合作方案、个人作品、产品介绍等文档</view>
					<view>仅支持单个PDF上传，最大20MB</view>
				</view>
			</div>
			<view class="form-list-files" v-if="fileList.length > 0">
				<view class="form-list-files-item" v-for="(item,index) in fileList" @click="openFile(item.url)">
					<view class="form-list-files-item-img">
						<image :src="item.url + '?ci-process=doc-preview&page=1&width=100'"></image>
						<!-- <uni-icons custom-prefix="iconfont" type="icon-file_pdf" size="50" color="#e4393c"></uni-icons> -->
					</view>
					<view class="form-list-files-item-c">
						<view class="form-list-files-item-c-t">
							<view class="form-list-files-item-c-title ellipsis">{{item.name || ''}}</view>
							<view class="form-list-files-item-c-project">（共享项目）</view>
						</view>
						<view class="form-list-files-item-c-time">{{item.create_time || ''}}</view>
					</view>
					<!-- <picker mode="selector" :range="menu" range-key="label" @change="e => changeMenu(e, item)">
						
					</picker> -->
					<view class="form-list-files-item-r flex-row-center">

						<view class="del" @click.stop="changeMenu(1, item)">删除</view>
					</view>
				</view>
			</view>
		</view>
		<view class="card" style="margin-top: 20rpx;" v-if="circle_pay.length > 0 && info.permission.includes('4')">
			<view class="card-title flex-row-between">
				入圈费
				<view class="card-title-r">
					<view class="card-title-r-item" @click="toOrder">
						<span style="margin-left: 10rpx;">
							订单查询
						</span>
					</view>
				</view>
			</view>
			<view class="card-switch flex-row-between" v-for="it in circle_pay">
				<view style="flex: 1;padding-right: 20rpx;display: flex;align-items: center;">
					<text>{{it.type === 1 ? '月费' : it.type === 2 ? '年费' : '永久'}}</text>
					<view style="flex: 1;margin: 0 30rpx;" class="flex-row-center sort">
						<input type="number" placeholder="请输入" placeholder-class="ac" v-model="it.price" />
					</view>
					<text>元</text>
				</view>
				<view class="flex-row">
					<u-switch v-model="it.state" :activeValue="1" :inactiveValue="0" activeColor="#64aa6b"
						size="20"></u-switch>
					<view class="description">{{it.status === 0 ? '关闭' : '开启'}}</view>
					<!-- <u-icon name="close" color="#e4393c" size="18" @click="delItem(index)" v-if="info.thecharts != 1"></u-icon> -->
				</view>
			</view>
			<view class="addCircle">
				<view class="addCircle-top">
					<view>
						<u-checkbox activeColor="#67b12f" shape="circle" label="付费入圈"
							@change="e=>change(e, 'pay_to_join')" :checked="form.pay_to_join === 1"
							:labelSize="12"></u-checkbox>
					</view>
					<view>
						<u-checkbox activeColor="#67b12f" shape="circle" label="全员付费入圈"
							@change="e=>change(e, 'all_staff_charge')" :checked="form.all_staff_charge === 1"
							:labelSize="12"></u-checkbox>
					</view>
					<view>
						<u-checkbox activeColor="#67b12f" shape="circle" label="付费即可同意加入"
							@change="e=>change(e, 'pay_and_agree')" :checked="form.pay_and_agree === 1"
							:labelSize="12"></u-checkbox>
					</view>


				</view>
				<view class="addCircle-bottom">{{info.indicate}}</view>
			</view>
		</view>
		<view class="card" style="margin-top: 20rpx;" v-if="info.certificate_type === 1">
			<view class="card-title flex-row-between">
				组织证书
				<view class="card-title-r">
					<view class="card-title-r-item">
						<span><uni-icons custom-prefix="iconfont" type="icon-jiahao-fill" size="16"
								color="#23B97F"></uni-icons></span>
						<span style="margin-left: 10rpx;">
							申请新证书
						</span>
						<button open-type="contact"></button>
					</view>
				</view>
			</view>
			<view class="card-certificate">
				<view class="card-certificate-item" v-for="(it, index) in certificate">
					<view class="card-certificate-item-img" @click="preview([it.certificate])">
						<image :src="it.certificate" mode="widthFix"></image>
					</view>
					<view class="card-certificate-item-tx">{{it.name || ''}}</view>
					<view class="card-certificate-item-time" @click="toPage(it)"> （{{it.number || 0}}人）</view>
					<view class="card-certificate-item-switch">
						<switch :checked="it.show === 1" color="#12B475" style="transform:scale(0.6)"
							@change="e => setCertificate(e.detail.value, it, index)" />
						<text>{{it.show === 1 ? '展示' : '不展示'}}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- <view class="card-title" @click="gocircle">填加圈子按钮</view> -->

		<block v-if="isManage==2||isManage==3">
			<view class="" style="display: flex;align-items: center;justify-content: space-between;">

				<view class="bottom-btn flex-row-center" style="width: 70%;" @click="submit">保存</view>
				<view class="bottom-btn flex-row-center" style="width: 28%;font-size: 24rpx;" @click="gocircle">链接树管理
				</view>
			</view>

		</block>
		<block v-if="isManage==1">
			<view class="bottom-btn flex-row-center" @click="submit">保存</view>
		</block>

	</view>
</template>

<script>
	import {
		uploadFile
	} from '@/common/upload.js'
	import {
		card_circle_pdf,
		InformationUserBusinessCardHeadData,
		circle_information,
		up_circle_information,
		add_certificate,
		certificate_state,
		circle_type
	} from '@/common/http/api.js'
	import {
		uploadImg,
		uploadImgs,
		uploadVideo,
		uploadDel
	} from '@/common/upload.js'
	export default {
		props: ['userInfo'],
		data() {
			return {
				isManage: '',
				fan: false,
				value: '',
				fileList: [],
				menu: [{
					value: 1,
					label: '删除'
				}],
				c_id: 723,
				info: {
					config: {},
					grade: [],
					identity: [],
					thecharts: 1
				},
				is_add: false,
				form: {
					identity: [],
					grade: [],
					logo: '',
					card_logo: '',
					video: '',
					text_introduction: '',
					circle_id: '',
					pay_and_agree: 0, //是否开启付费 0 否 1 是
					all_staff_charge: 0, //全员收费
					pay_to_join: 0, //入圈费用
				},
				identityValue: '',
				circle_pay: [], //付费
				certificate: [],

			};
		},
		created() {


		},
		watch: {
			'userInfo': {
				handler(val) {
					if (!val) return
					this.c_id = val.circle_id
					this.form.circle_id = val.circle_id


					this.init().then(res => {
						this.getFileList()
					})
				},
				immediate: true
			}
		},
		methods: {
			gocircle() {
				uni.navigateTo({
					url: '/pagesC/link-tree/link-tree?isManage=' + this.form.circle_id
				})
			},
			toSharePoster() {
				uni.navigateTo({
					url: '/pagesA/circleManage/share-poster/share-poster?id=' + this.form.circle_id
				})
			},
			preview(e) {
				this.$emit('preview')
				this.MpreviewImage(e)
			},
			toOrder() {
				uni.navigateTo({
					url: '/pagesA/circleManage/order?circle_id=' + this.userInfo.circle_id
				})
			},
			toPage(it) {
				uni.navigateTo({
					url: '/pagesA/circleManage/numberLikes/numberLikes?id=' + it.id + '&name=' + it.name
				})
			},
			setCertificate(e, it, index) {
				console.log(e)
				let data = {
					id: it.id,
					show: e ? 1 : 0
				}
				uni.showLoading()
				certificate_state(data).then(res => {
					uni.hideLoading()

					this.certificate[index].show = it.show === 1 ? 0 : 1
				})
			},
			//打开客服
			openKf() {
				wx.openCustomerServiceChat({
					extInfo: {
						url: ''
					},
					corpId: 'ww877049f5e74db574',
					success(res) {},
					fail(err) {
						console.log('err', err)
						uni.showToast({duration:3000,
							title: err.errMsg,
							icon: 'none'
						})
					},
				})
			},
			//下一个
			moveDown(index) {
				console.log('form.identity', this.form.identity, index)
				if (index < this.form.identity - 1) {
					const temp = this.items[index];
					this.items[index] = this.items[index + 1];
					this.items[index + 1] = temp;
				}
			},
			uploadHttp() {
				uploadVideo().then(res => {
					console.log('上传', res)
					this.form.video = res.data.url
				})
			},
			upload(field) {
				uploadImg().then(res => {
					console.log('res', res)
					this.form[field] = res.data.url
				})
			},
			submit() {
				console.log('this.form.identity', this.form.identity)

				if (this.form.identity.length === 0) {
					return this.$u.toast('请添加身份设置!')
				}

				let status = true
				this.form.identity.forEach(i => {
					if (this.form.identity.filter(j => j.name === i.name).length > 1) {
						status = false
					}
				})

				if (!status) {
					return this.$u.toast('不能有重复的身份名字!')
				}

				if (this.form.identity.some(i => i.sort === '')) {
					return this.$u.toast('请输入身份排序！')
				}

				let state = true
				this.form.grade.forEach(i => {
					if (this.form.grade.filter(j => j.name === i.name).length > 1) {
						state = false
					}
				})

				if (!state) {
					return this.$u.toast('不能有重复的等级名字!')
				}

				let data = {
					...this.form,
					identity: JSON.stringify(this.form.identity),
					grade: JSON.stringify(this.form.grade),

				}


				//判断付费
				if (this.circle_pay.length > 0) {
					//判断是否付费
					if (this.info.permission.includes('4') && this.form.pay_to_join === 1) {
						//开启付费
						//判断是否有开启
						if (!this.circle_pay.some(i => i.state === 1)) {
							//没有开启
							this.$u.toast('请选择一个开启入圈费！')
							return
						} else {
							//判断是否开启的有值
							if (this.circle_pay.some(i => i.state === 1 && !(i.price > 0))) {
								//没有值
								this.$u.toast('请输入开启的入圈费！')
								return
							}
						}
					}
				}

				data['circle_pay'] = JSON.stringify(this.circle_pay)


				uni.showLoading({
					mask: true
				})

				up_circle_information(data).then(res => {
					uni.hideLoading()
					this.$u.toast('保存成功')

				})

			},
			delItem(index) {
				console.log('index', index)
				this.form.identity.splice(index, 1)
			},
			open() {
				this.identityValue = ''
				this.is_add = true
			},
			save() {
				this.form.identity.push({
					name: this.identityValue,
					status: 0
				})
				this.del()
			},
			del() {
				this.identityValue = ''
				this.is_add = false
			},
			async init() {
				uni.showLoading()

				circle_type({
					id: this.c_id
				}).then(res => {
					this.isManage = res.data

				})


				const res = await circle_information({
					circle_id: this.c_id
				})
				uni.hideLoading()
				if (Array.isArray(res.data.circle_pay)) {
					res.data.circle_pay.forEach(i => {
						i.price = i.price ? Number(i.price) : ''
					})
				}
				this.circle_pay = res.data.circle_pay
				this.form.pay_and_agree = res.data.pay_and_agree
				this.form.pay_to_join = res.data.pay_to_join
				this.form.all_staff_charge = res.data.all_staff_charge
				this.info = res.data
				this.form.identity = res.data.identity
				this.form.grade = res.data.grade
				this.form.logo = res.data.config.logo


				let str = res.data.config.text_introduction

				str = str.replace(/<p>|<\/p>/g, '');
				str = str.replace(/&nbsp;/g, ' ');
				str = str.replace('<br>', '\n');
				str = str.replace('<br>', '\n');
				this.form.text_introduction = str


				this.form.video = res.data.config.video
				this.form.card_logo = res.data.config.card_logo

				this.certificate = res.data.certificate
				console.log('this.info', this.info)
			},
			openFile(e) {
				if (e === '') {
					this.$u.toast('地址为空！')
					return
				}
				uni.downloadFile({
					url: e,
					success: function(res) {
						var filePath = res.tempFilePath;
						uni.openDocument({
							filePath: filePath,
							showMenu: true,
							success: function(res) {
								console.log('打开文档成功');
							}
						});
					}
				});
			},
			change(e, name) {
				console.log(e)
				this.form[name] = e ? 1 : 0
			},
			getFileList() {
				uni.showLoading()
				card_circle_pdf({
					type: 7,
					c_id: this.c_id
				}).then(res => {
					uni.hideLoading()
					this.fileList = res.data
				})
			},
			uploadPdf() {
				this.is_onShow = true
				uploadFile().then(res => {
					console.log('pdf', res)
					card_circle_pdf({
						type: 2,
						c_id: this.c_id,
						name: res.data.name,
						pdf: res.data.url
					}).then(res => {
						this.getFileList()
					})
				}).catch(({
					msg
				}) => {
					console.log('失败', msg)
					uni.showToast({duration:3000,
						title: msg,
						icon: 'none'
					});
				})
			},
			changeMenu(e, item) {
				this.fileDel(item.id)
			},
			fileDel(e) {
				uni.showLoading()
				card_circle_pdf({
					type: 6,
					c_id: this.c_id,
					pdf_id: e
				}).then(res => {
					uni.hideLoading()
					this.getFileList()
				}).catch(err => {
					uni.hideLoading()
				})
			}
		}
	}
</script>

<style lang='scss' scoped>
	.container {
		padding: 0 30rpx 30rpx;

		.bottom-btn {
			/* padding: 20rpx 0; */
			color: #fff;
			background-color: #12B475;
			border-radius: 40rpx;
			margin-top: 20rpx;
			height: 80rpx;
			box-sizing: border-box;
			line-height: 80rpx;
		}

		.level+.level {
			margin-top: 20rpx;
		}

		.level {
			.level-title {
				padding: 20rpx;
				border: 1px solid #eee;
				border-radius: 10rpx;
				margin-right: 10rpx;
				font-size: 28rpx;
			}
		}

		.description2 {
			font-size: 24rpx;
			color: #ccc;
			padding-left: 40rpx;
			padding-right: 20rpx;
			max-width: 200rpx;
		}


		.card {
			border-radius: 20rpx;
			background-color: #fff;
			padding: 20rpx;
			width: 100%;
			box-sizing: border-box;

			textarea {
				font-size: 15px;
				color: #606266;
				box-sizing: border-box;
				padding: 20rpx;
				white-space: pre-wrap;
			}

			.ac {
				font-size: 15px;
				color: #606266;
			}

			.card-title {
				font-size: 28rpx;
				color: #000;
				border-bottom: 1px solid #eee;
				padding-bottom: 20rpx;
				font-weight: bold;

				.card-title-r {
					display: flex;

					.card-title-r-item {
						display: flex;
						align-items: center;
						position: relative;

						span {
							font-size: 26rpx;
							color: #23B97F;
						}

						button {
							position: absolute;
							top: 0;
							left: 0;
							z-index: 99;
							width: 100%;
							height: 100%;
							opacity: 0;
						}
					}
				}

				.card-title-r {
					margin-right: 20rpx;
				}

				.card-title-r:last-child {
					margin-right: 0;
				}
			}

			.description {
				font-size: 24rpx;
				color: #ccc;
				margin-left: 10rpx;
			}

			.card-switch {
				margin-top: 20rpx;
				font-size: 28rpx;
				color: #999;
			}

			.add-btn {
				margin-top: 10rpx;
				width: 400rpx;
				height: 80rpx;
				border-radius: 40rpx;
				background-color: #ededed;
				color: #8f8f8f;
			}
		}
	}

	.form-list-c {
		height: 170rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		padding-top: 20rpx;

		.form-list-c-add {
			font-family: PingFang SC;
			font-weight: 300;
			font-size: 24rpx;
			color: #23B97F;
			text-align: center;
			margin-bottom: 10rpx;
		}

		.form-list-c-tx {
			view {
				color: #555;
				text-align: center;
				font-family: PingFang SC;
				font-weight: 300;
				font-size: 24rpx;
			}
		}
	}

	.form-list-files {
		width: 100%;

		.form-list-files-item {
			width: 100%;
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;

			.form-list-files-item-img {
				width: 100rpx;
				height: 100rpx;
				border-radius: 20rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.form-list-files-item-c {
				flex: 1;
				min-width: 0;
				display: flex;
				justify-content: space-between;
				flex-direction: column;
				height: 100rpx;
				margin: 0 20rpx;

				.form-list-files-item-c-t {
					width: 100%;
					display: flex;
					align-items: center;

					.form-list-files-item-c-title {
						flex: 1;
						min-width: 0;
						width: fit-content;
						font-size: 28rpx;
						color: #333;
						font-weight: bold;
					}

					.form-list-files-item-c-project {
						font-size: 32rpx;
						color: #23B97F;
						width: 96rpx * 2;
						font-weight: bold;
					}
				}

				.form-list-files-item-c-time {
					font-size: 26rpx;
					color: #555;
				}
			}

			.form-list-files-item-r {
				height: 100rpx;
				width: 50rpx;

			}
		}

		.form-list-files-item:last-child {
			margin-bottom: 0;
		}

		.form-list-files-item:first-child {
			padding-top: 20rpx;
		}
	}

	.del {
		color: #e4393c;
		font-size: 22rpx;
	}

	.add {
		width: 100%;
		display: flex;
		align-items: center;
		padding: 10rpx 0;

		.add-input {
			flex: 1;
			margin-right: 10rpx;
			height: 60rpx;

			input {
				width: 100%;
				height: 100%;
				box-sizing: border-box;
				padding: 0 10rpx;
				font-size: 22rpx;
				color: #000;
				border: 1rpx solid #ccc;
				border-radius: 10rpx;
			}

			.add-input-plac {
				font-size: 22rpx;
				color: #000;
			}
		}

		.add-r {
			display: flex;
			align-items: center;

			span {
				color: #606266;
				font-size: 28rpx;
				margin-left: 20rpx;
			}
		}

		.tx {}
	}

	.setting {
		.add-input {
			width: 40%;
			flex: none;
		}

		.add-r {}
	}

	.add {
		width: 100%;
		display: flex;
		align-items: center;
		padding: 10rpx 0;

		.add-input {
			flex: 1;
			margin-right: 10rpx;
			height: 60rpx;

			input {
				width: 100%;
				height: 100%;
				box-sizing: border-box;
				padding: 0 10rpx;
				font-size: 22rpx;
				color: #000;
				border: 1rpx solid #ccc;
				border-radius: 10rpx;
			}

			.add-input-plac {
				font-size: 22rpx;
				color: #000;
			}
		}

		.add-r {
			display: flex;
			align-items: center;
		}

		.tx {}
	}

	.setting {
		.add-input {
			width: 40%;
			flex: none;
		}

		.add-r {}
	}

	.layout-img-list {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		margin-top: 10rpx;

		&>view {
			margin-right: 15rpx;
		}
	}

	.layout-img-list-add {
		width: 151rpx;
		height: 151rpx;
		border-radius: 20rpx;
		/* 	border: 1px solid #999999; */
		display: flex;
		align-items: center;
		justify-content: center;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.layout-img-list-item {
		width: 151rpx;
		height: 151rpx;
		position: relative;

		image {
			width: 100%;
			height: 100%;
		}

		.layout-img-list-item-image {
			border-radius: 20rpx;
		}

		.layout-img-list-item-del {
			width: 38rpx;
			height: 38rpx;
			position: absolute;
			top: -15rpx;
			right: -15rpx;
			z-index: 2;
		}
	}

	.sort {
		input {
			font-size: 22rpx;
			color: #000;
			border: 1rpx solid #eee;
			padding: 0 20rpx;
			border-radius: 10rpx;
		}

		.ac {
			color: #eee;
			font-size: 22rpx;
		}
	}

	.addCircle {
		width: 100%;

		.addCircle-top {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			margin: 30rpx 0;

			&>view {
				margin-right: 10rpx;
			}

			&>view:last-child {
				margin-right: 0;
			}
		}

		.addCircle-bottom {
			font-size: 26rpx;
			color: #B9B9B9;
		}
	}

	.card-certificate {
		width: 100%;
		overflow-x: scroll;
		white-space: nowrap;
		padding-top: 10rpx;

		.card-certificate-item {
			display: inline-block;
			margin-right: 30rpx;
			width: 195rpx;

			.card-certificate-item-img {
				width: 100%;
				margin-bottom: 10rpx;

				image {
					width: 100%;
				}
			}

			.card-certificate-item-tx {
				font-size: 28rpx;
				color: #8f8f8f;
				text-align: center;
				margin-bottom: 10rpx;
			}

			.card-certificate-item-time {
				font-size: 24rpx;
				color: #12B475;
				text-align: center;
			}

			.card-certificate-item-switch {
				display: flex;
				align-items: center;
				justify-content: center;
				color: #12B475;
				font-size: 24rpx;
			}
		}
	}
</style>